<template>
    <div class="root">
        <div class="cit" v-for="l in list">
            <router-link :to="'/home/shop/'+l.id+'/'+l.album.id">
                <p class="m1">
                    <img class="mg1" :src="l.photo.path" rel="noreferrer" />
                </p>
                <p style='padding-left:10px;margin:3px 0px;color:#757575;'>{{l.msg}}</p>
                <p style='padding-left:10px;margin:3px 0px;color:#9A9A9A;'> ★&nbsp;{{l.favorite_count}}</p>
                <div class="bottom">
                    <img class="mg2" :src="l.sender.avatar" />
                    <div class="al">
                        <h5> {{l.sender.username}}</h5>
                        <span>收集到 {{l.album.name}} </span>
                    </div>
                </div>
            </router-link>
        </div>
    </div>
</template>
<script>
export default {
    props: ["list"]
}
</script>
<style scoped>
.root {
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    background-color: #F5F5F5;
}
p{
    margin: 0px;
}
.cit {
    margin:7px;
    width: 45%;
    padding: 0px 0px 5px;
    background-color: white;
    border:2px solid #EFEFEF;
}

.mg1 {
    width: 100%;
    height: 50%;
}

.mg2 {
    width: 20%;
    height: 20%;
    border-radius: 50%;
}

.bottom {
    border-top: 1px solid #EFEFEF;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    justify-content: space-between;
}
.bottom img{
    width: 40px;
    height: 40px;
}
.al {
    /*color: blue;*/
    padding-left:5px; 
}
h5{
    color: #59ABE2;
    margin: 2px;
    font-size: 12px;
}
a{
    color: black;
    text-decoration: none;
}
</style>
